<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-12-07 20:57:50
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        html,
        body,
        #app {
            height: auto;
            background: #fff;
        }

        .van-field__button {
            padding-left: 0;
            /* width: 60px; */
            text-align: center;
            height: 60px;
            line-height: 66px;
            /* border: 1px solid #e4e4e4; */
            margin-left: 10px;
        }

        .form-button {
            padding: 0 10px 10px;
        }

        .van-uploader__preview-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #969799;
            font-size: 18px;
            background-color: #fff;
            border-radius: 100%;
        }

        .van-uploader__upload {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-image {
            width: 60px;
            height: 60px;
        }

        .van-uploader__preview-delete {
            height: 20px;
        }

        .van-cell__value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nav {
            padding-left: 10px;
            vertical-align: middle;
        }

        .nav img {
            width: 20px;
            vertical-align: middle;
            margin-top: -4px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-cell title="拜访客户" :value="visitForm.S_ClientName" @click="openScreen(-1,10)">
            <div slot="right-icon" @click.stop="openNavigation">
                <van-icon name="arrow" color="#969799" style="vertical-align: middle;" v-show="!visitForm.S_ClientName">
                </van-icon>
                <span class="nav" v-show="visitForm.S_ClientName"><img src="../image/nav.png" /></span>
            </div>
        </van-cell>
        <van-field v-model="visitForm.S_Remarks" rows="3" autosize type="textarea" placeholder="请输入备注">
            <div slot="button">
                <div>
                    <div class="van-uploader">
                        <div class="van-uploader__wrapper">
                            <div class="van-uploader__preview" v-show="visitForm.S_Path">
                                <div class="van-image van-uploader__preview-image"
                                    style="overflow: hidden; border-radius: 4px;">
                                    <img :src="'http://' + visitForm.S_Path" class="van-image__img"
                                        style="object-fit: cover;" />
                                </div>
                                <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                    @click="visitForm.S_Path = ''"></i>
                            </div>
                            <div class="van-uploader__upload" v-show="!visitForm.S_Path" @click="chooseImg">
                                <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-field>
        <div class="form-button">
            <van-button block type="primary" @click="visitConfirm">
                {{nowDate}}&nbsp;&nbsp;{{visitForm.S_Status==1?'签到打卡':'签退打卡'}}</van-button>
        </div>


    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var maps = [
            ['高德地图', 'iosamap://', 'com.autonavi.minimap'],
            ['百度地图', 'baidumap://', 'com.baidu.BaiduMap']
        ];
        var buttons = [];

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var selectType = ret.value.selectType;
            var type = ret.value.type;
            var row = ret.value.row;
            if (selectType == 10) {
                window.localStorage.setItem('customerRow', JSON.stringify(row));
                vm.visitForm.S_ClientID = row.id;
                vm.visitForm.S_ClientName = row.name;
                vm.visitForm.Longitude = row.Longitude;
                vm.visitForm.Latitude = row.Latitude;

                var frames = api.frames();

                var new_frame = frames.filter(function (row) {
                    return row.name == 'customerData';
                })
                if (new_frame.length == 0) {
                    var appTop_ = parseInt(window.localStorage.getItem('safeAreaTop'));
                    var y = appTop_ ? (appTop_ + 40) : (appTop_ + 25);
                    api.openFrame({
                        name: 'customerData',
                        url: 'common/customerData.html',
                        rect: {
                            x: 5,
                            y: y + 5,
                            w: api.winWidth - 10,
                            h: 96
                        },
                        pageParam: {
                            customerData: row
                        }
                    });
                } else {
                    api.sendEvent({
                        name: 'setcustomerData',
                        extra: {
                            customerData: row
                        }
                    });
                }


            }

        });



        var userInfo = FLD.getUserInfo();

        var defaultCustomerData = api.pageParam.defaultCustomerData;

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			agree:true
		});	
		}

        // if (api.systemType == 'ios') {
            map.initMapSDK(function (ret) { });
        // }


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                visitType: 1,
                nowDate: FLD.getFormatDate(),
                visitForm: {
                    S_ClientID: 0,
                    S_ClientName: '',
                    Longitude: '',
                    Latitude: '',
                    S_Status: 1,
                    S_Path: '',
                    S_Remarks: '',
                    S_Longitude: '',
                    S_Latitude: '',
                    DateTime: ''
                }
            },
            created: function () {
                var that = this;

                setInterval(function () {
                    that.nowDate = FLD.getFormatDate();
                }, 1000)

                if (window.localStorage.getItem('visitData')) {
                    var visitData = JSON.parse(window.localStorage.getItem('visitData'));
                    that.visitForm.S_ClientID = visitData.S_ClientID;
                    that.visitForm.S_ClientName = visitData.S_ClientName;
                    that.visitForm.Longitude = visitData.Longitude;
                    that.visitForm.Latitude = visitData.Latitude;
                    that.visitForm.S_Status = 2;
                } else {
                    if (defaultCustomerData) {
                        that.visitForm.S_ClientID = defaultCustomerData.id;
                        that.visitForm.S_ClientName = defaultCustomerData.name;
                        that.visitForm.Longitude = defaultCustomerData.Longitude;
                        that.visitForm.Latitude = defaultCustomerData.Latitude;
                    }
                }

                this.appInstalled();
            },
            methods: {

                openNavigation() {
                    var that = this;
                    if (that.visitForm.S_ClientName) {
                        if (that.visitForm.Longitude && that.visitForm.Latitude) {
                            api.actionSheet({
                                buttons: buttons
                            }, function (ret, err) {
                                ret.buttonIndex -= 1;
                                if (ret.buttonIndex == 2) {
                                    return false;
                                } if (!maps[ret.buttonIndex][3]) {
                                    if (ret.buttonIndex == 0) {
                                        var gd_latlng = that.bd_decrypt(that.visitForm.Longitude, that.visitForm.Latitude);
                                        if (api.systemType == 'ios') {
                                            location.href = encodeURI('iosamap://path?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                        } else {
                                            location.href = encodeURI('amapuri://route/plan/?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                        }
                                    } else if (ret.buttonIndex == 1) {
                                        if (api.systemType == 'ios') {
                                            location.href = encodeURI('baidumap://map/direction?destination=' + that.visitForm.Latitude + ',' + that.visitForm.Longitude + '&mode=driving&src=ios.baidu.福路德连锁');
                                        } else {
                                            location.href = encodeURI('bdapp://map/direction?destination=' + that.visitForm.Latitude + ',' + that.visitForm.Longitude + '&mode=driving&src=andr.baidu.福路德连锁');
                                        }
                                    }
                                }
                            })
                        } else {
                            api.toast({
                                msg: '请先保存客户定位',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                    } else {
                        that.openScreen(-1, 10);
                    }

                },
                appInstalled(num) {
                    var that = this;
                    if ((num = num ? num : 0) < maps.length) {
                        api.appInstalled({
                            appBundle: api.systemType == 'ios' ? maps[num][1] : maps[num][2]
                        }, function (ret, err) {
                            if (ret.installed) {
                                buttons.push(maps[num][0]);
                                maps[num].push(false);
                            } else {
                                buttons.push(maps[num][0] + ' ( 未安装 )');
                                maps[num].push(true);
                            }
                            that.appInstalled(++num);
                        });
                    }
                },
                bd_decrypt(bd_lng, bd_lat) {
                    var X_PI = 3.14159265358979324 * 3000.0 / 180.0;
                    var x = bd_lng - 0.0065;
                    var y = bd_lat - 0.006;
                    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
                    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
                    var gg_lng = z * Math.cos(theta);
                    var gg_lat = z * Math.sin(theta);
                    return { lng: gg_lng, lat: gg_lat }
                },
                chooseImg() {
                    var that = this;

                    var FNPhotograph = api.require('FNPhotograph');
                    FNPhotograph.open({
                        path: 'fs://',
                        album: true,
                        quality: 'medium'
                    }, function (ret) {
                        if (ret.eventType == 'takePhoto') {
                            FNPhotograph.close();
                            FLD.uploadFile('拜访图片', ret.imagePath, function (path) {
                                that.visitForm.S_Path = FLD.serverIP + path;
                            })
                        }
                    });
                },
                visitConfirm() {
                    var that = this;
                    map.getLocation({
                        accuracy: '10m',
                        autoStop: true
                    }, function (ret, err) {
                        if (ret.status) {
                            that.visitForm.S_Longitude = ret.lon;
                            that.visitForm.S_Latitude = ret.lat;
                            if (!that.visitForm.S_ClientID) {
                                api.toast({
                                    msg: '请先选择一家客户',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                return false;
                            }
                            FLD.ajax('APP_KQDKJK_N', that.visitForm, function (res) {

                                if (that.visitForm.S_Status == 1) {
                                    that.visitForm.DateTime = FLD.getFormatDate();
                                    window.localStorage.setItem('visitData', JSON.stringify(that.visitForm));
                                    that.visitForm.S_Path = '';
                                    that.visitForm.S_Remarks = '';
                                    that.visitForm.S_Status = 2;
                                    api.toast({
                                        msg: '签到打卡成功',
                                        duration: 2000,
                                        location: 'bottom'
                                    });

                                } else {
                                    window.localStorage.removeItem('customerRow');
                                    window.localStorage.removeItem('visitData');
                                    that.visitForm = {
                                        S_ClientID: 0,
                                        S_ClientName: '',
                                        Longitude: '',
                                        Latitude: '',
                                        S_Status: 1,
                                        S_Path: '',
                                        S_Remarks: '',
                                        S_Longitude: '',
                                        S_Latitude: '',
                                        DateTime: ''
                                    }
                                    api.closeFrame({
                                        name: 'customerData'
                                    });
                                    api.toast({
                                        msg: '签退打卡成功',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                                api.sendEvent({
                                    name: 'setUserPopup'
                                });

                            })
                        }
                    });

                },
                openScreen(type, index) {
                    var that = this;
                    if (window.localStorage.getItem('visitData')) {
                        api.toast({
                            msg: '请先签退',
                            duration: 2000,
                            location: 'bottom'
                        });
                        return false;
                    }
                    var obj = {
                        S_Type: 10,
                        S_Cont: '',
                        S_BranchID: userInfo.S_BranchID,
                        S_SXZ: '',
                        S_StockID: userInfo.S_StockID,
                        S_CargoID: userInfo.S_CargoID,
                        S_BarCode: '',
                        S_PriceN: userInfo.S_PriceN,
                        S_ProductID: 0
                    }

                    api.openWin({
                        name: '筛选' + index,
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            filterData: obj,
                            type: type,
                            allowClear: false
                        }
                    })

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>